<!-- 参数 》 下拉框 -->

<template>
  <div v-bind="paramProps">
    <label v-if="label" v-bind="labelProps">{{ label }}</label>

    <el-select
      v-model="model"
      v-bind="commonProps"
      :popperClass="popperClass"
      :filterable="!noSearch"
      @change="emitChange"
    >
      <el-option
        v-for="(item, i) in selectData"
        :key="`${item[0]}-${i}`"
        :class="getHideClass(item)"
        :value="item[0]"
        :label="item[1]"
        :disabled="getDisabled(item)"
      >
        <div class="CoreWeb-option">
          <slot name="item" :item="item">
            <div>{{ item[1] }}</div>
            <div v-if="showRight" class="CoreWeb-option-right">{{ item[rightIndex] }}</div>
          </slot>
        </div>
      </el-option>
    </el-select>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixParam from '../mixParam'
import FormSelect from '../../form/FormSelect'

const name = 'ParamSelect'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixParam],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: FormSelect.computed,

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 获取隐藏样式类
     */
    getHideClass: FormSelect.methods.getHideClass,

    /**
     * 获取是否禁用
     */
    getDisabled: FormSelect.methods.getDisabled,

    /**
     * 清除选中
     */
    toClear: FormSelect.methods.toClear,
  },
}
</script>
